<template>
	<view class="demand-container">
		<view class="demand-header">
			<text class="header-title">需求详情</text>
		</view>

		<view class="demand-card">
			<view class="demand-info-row">
				<view class="info-label">工作名称</view>
				<view class="info-value">{{demand.serveName}}</view>
			</view>

			<view class="demand-info-row">
				<view class="info-label">发布时间</view>
				<view class="info-value">
					<text>{{demand.createTime}}</text>
				</view>
			</view>
			<view class="demand-info-row">
				<view class="info-label">工作地点</view>
				<view class="info-value">
					<text>{{demand.serveProvince}} {{demand.serveCity}}</text>
				</view>
			</view>
			<view v-if="demand.serveAddress" class="demand-info-row">
				<view class="info-label">详细地址</view>
				<view class="info-value">
					<text>{{demand.serveAddress}}</text>
				</view>
			</view>


			<view v-if="demand.serveType" class="demand-info-row">
				<view class="info-label">工作方式</view>
				<view class="info-value">{{demand.serveType}}</view>
			</view>

			<view v-if="demand.serveTime" class="demand-info-row">
				<view class="info-label">工作时间</view>
				<view class="info-value">{{demand.serveTime}}</view>
			</view>

			<view class="demand-info-row">
				<view class="info-label">工作报酬</view>
				<view class="info-value">{{demand.serveFee}}元/月</view>
			</view>

			<view class="demand-description">
				<view class="info-label">工作内容</view>
				<view class="description-content">
					<text>{{demand.serveContent}}</text>
				</view>
			</view>
			<view class="demand-description">
				<view class="info-label">工作要求</view>
				<view class="description-content">
					<text>{{demand.serveRequire}}</text>
				</view>
			</view>

			<view class="demand-description">
				<view class="info-label">联系方式</view>
				<view v-if="isCertified || useChance" class="description-content" @click="copyContact">
					<text>{{demand.contact}}</text>
				</view>
				<view v-else class="description-content">
					<view style="size: 30rpx;">职业认定后不限查看次数，可使用查看次数 <text
							style="color:#C62828 ;font-size: 36rpx;">{{seeContactNum}}次</text></view>
					<view style="align-items: center;text-align: center;margin-top: 10rpx;">
						<button style="background-color: #C62828;color: white;" size="mini"
							@click="useSeeContact">使用查看次数</button>
					</view>

				</view>

			</view>
		</view>

		<view v-if="!isCertified" class="action-area" style="flex-direction: column;">
			<image :src="verifyBanner" mode="widthFix"></image>
			<button class="apply-button" @click="toCertVerify">{{buttonText}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				demand: {
					"batchNo": "1",
					"contact": "",
					"createTime": "",
					"creatorId": "0",
					"id": 1,
					"serveAddress": "",
					"serveCity": "",
					"serveContent": "",
					"serveFee": "",
					"serveName": "",
					"serveProvince": "",
					"serveRequire": "",
					"serveTime": "",
					"serveType": ""
				},
				applyDisable: false,
				buttonText: '去认定',
				isCertified: false,
				useChance: false,
				seeContactNum: 0,
				clicked: false,
				verifyBanner: 'https://file.dingdongjipai.com/sansao/file/cert/certVerifyBanner.png'
			}
		},
		onLoad(options) {
			if (options.item) {
				this.demand = JSON.parse(options.item);
			}
			this.getResume();
			this.getEnableNum();
		},
		methods: {
			toCertVerify() {
				uni.navigateTo({
					url: '/pages/service/certVerify'
				})
			},
			getResume() {
				this.$Request.postFormHost(this.$Api.getUserResume).then(res => {
					if (res.status === 0) {
						this.isCertified = res.data.certificate === 1 ? true : false;
					}
				})
			},
			copyContact() {
				uni.setClipboardData({
					data: this.demand.contact,
					success() {
						uni.showToast({
							title: '联系方式已复制',
							icon: 'none'
						})
					}
				})
			},
			getEnableNum() {
				//获取剩余次数
				this.$Request.postFormHost(this.$Api.getEnableNum).then(res => {
					if (res.status == 0) {
						this.seeContactNum = res.data.seeContactNum;
					}
				})
			},
			//使用查看次数
			useSeeContact() {
				if (this.clicked)
					return;
				if (this.seeContactNum <= 0) {
					uni.showToast({
						title: "剩余查看次数不足",
						icon: "none"
					})
					return;
				}

				this.clicked = true;
				this.$Request.postFormHost(this.$Api.seeContact).then(res => {
					if (res.status === 0) {
						this.seeContactNum = res.data;
						this.useChance = true;
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
					this.clicked = false;
				});
			}
		}
	}
</script>

<style>
	.demand-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
		background: linear-gradient(to bottom, #FFF0F0, #FFEBEB);
		padding: 20rpx 0;
	}

	.demand-header {
		width: 90vw;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #E53935;
		margin-bottom: 30rpx;
	}

	.header-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #D32F2F;
		position: relative;
		padding-left: 20rpx;
	}

	.header-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 8rpx;
		height: 32rpx;
		background-color: #D32F2F;
		border-radius: 4rpx;
	}

	.demand-card {
		width: 90vw;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 20rpx rgba(211, 47, 47, 0.1);
		padding: 30rpx;
		margin-bottom: 40rpx;
	}

	.demand-info-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 24rpx;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #FFCDD2;
	}

	.info-label {
		width: 160rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #D32F2F;
	}

	.info-value {
		flex: 1;
		font-size: 28rpx;
		color: #333333;
	}

	.demand-description {
		display: flex;
		flex-direction: column;
	}

	.description-content {
		margin-top: 16rpx;
		padding: 20rpx;
		background-color: #FFF8F8;
		border-radius: 12rpx;
		min-height: 150rpx;
		color: #333333;
		font-size: 28rpx;
		line-height: 1.6;
	}

	.action-area {
		width: 90vw;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.apply-button {
		width: 80%;
		height: 90rpx;
		background: linear-gradient(to right, #F44336, #C62828);
		color: white;
		font-size: 32rpx;
		font-weight: bold;
		border-radius: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 6rpx 12rpx rgba(211, 47, 47, 0.2);
		transition: all 0.3s ease;
		margin-bottom: 100rpx;
		margin-top: 20rpx;
	}

	.apply-button:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(211, 47, 47, 0.3);
	}
</style>